<template>
  <el-dialog
    :title="title"
    v-model="dialogVisible"
    width="500"
    :close-on-click-modal="false"
    destroy-on-close
    @open="handleOpen"
    :before-close="handleClose"
  >
    <el-divider class="zdy-divider" />
    <div class="box-tree">
      <el-tree
        style="width: 100%"
        :data="treeData"
        empty-text="暂无数据"
        show-checkbox
        node-key="id"
        ref="treeRef"
        :props="defaultProps"
        :default-expanded-keys="defaultExpandedKeys"
      >
        <template #default="{ node }">
          <span class="node-content" :title="node.label">
            {{ node.label }}
          </span>
        </template>
      </el-tree>
    </div>
    <el-divider class="zdy-divider" />
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">关闭</el-button>
      <el-button type="primary" @click="handleTreeActive" v-if="!isReadonly">保存</el-button>
    </span>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from "vue"
import { ElMessage } from "element-plus"

// 定义 emits
const emit = defineEmits(["treeActive", "update:visible"])

const treeRef = ref(null)
const defaultCheckedKeys = ref([])
const defaultExpandedKeys = ref([])

// 定义 props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ""
  },
  data: {
    type: Array,
    default: () => []
  },
  checkList: {
    type: Array,
    default: () => []
  },
  isReadonly: {
    type: Boolean,
    default: false
  }
})
const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => {
    // 修改为正确的变量名
    emit("update:visible", val)
  }
})

const handleClose = () => {
  treeData.value = []
  emit("update:visible", false)
}

const treeData = ref([])

function handleOpen() {
  treeData.value = props.data
  // 默认勾选的节点
  const filteredNodes = findNodes(props.data, props.checkList)
  defaultCheckedKeys.value = filteredNodes.map((node) => node.id)
  treeRef.value.setCheckedKeys(defaultCheckedKeys.value, false)
  // 默认展开的节点
  defaultExpandedKeys.value = treeData.value.map((item) => item.id)
}

// 递归遍历所有节点
function findNodes(nodes, targetIds) {
  let results = []
  for (const node of nodes) {
    // 检查当前节点是否符合条件
    if (targetIds.includes(node.id) && node.children === null) {
      results.push(node)
    }
    // 递归检查子节点
    if (node.children && node.children.length) {
      results = results.concat(findNodes(node.children, targetIds))
    }
  }
  return results
}

const defaultProps = {
  children: "children",
  label: (data) => {
    return data.label
  },
  disabled: (data) => props.isReadonly
}

function handleTreeActive() {
  const checkedNodes = treeRef.value.getCheckedNodes(false, true)
  // const leafNodes = checkedNodes.filter((node) => !node.children || node.children.length === 0)
  emit("treeActive", checkedNodes)
}
</script>

<style lang="scss" scoped>
.box-tree {
  width: 100%;
  height: 500px;
  display: flex;
  overflow: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  .node-content {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
  }
}
.dialog-footer {
  text-align: right;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.zdy-divider {
  margin: 10px 0;
  border-color: #e9e9e9;
}
</style>
